<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="房间名称" prop="houseName">
        <el-row>
          <el-col :span="18">
            <el-input
              v-model="ruleForm.houseName"
              placeholder="房间名称"
              maxlength="20"
            ></el-input>
          </el-col>
          &nbsp;
          <el-col :span="3">
            <span class="word-limit"
              >{{ ruleForm.houseName.length }} / {{ 20 }}</span
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="门市价" prop="housePrice">
        <el-row>
          <el-col :span="18">
            <el-input v-model="ruleForm.housePrice" placeholder="￥0.00">
              <span slot="append">元</span></el-input
            >
          </el-col>
          <el-col :span="6">
            <span class="word-limit">前台默认销售价格</span>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="押金">
        <el-row>
          <el-col :span="8">
            <el-radio v-model="ruleForm.isHouseSecurity" :label="false"
              >不需要</el-radio
            >
            <el-radio v-model="ruleForm.isHouseSecurity" :label="true"
              >需要</el-radio
            >
          </el-col>
          <el-col :span="5">
            <el-input
              v-model="ruleForm.houseSecurity"
              :disabled="!ruleForm.isHouseSecurity"
              placeholder="0"
              ><span slot="append">元</span></el-input
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="房型面积">
        <el-row>
          <el-col :span="18">
            <el-input
              v-model="ruleForm.houseArea"
              maxlength="5"
              placeholder="0"
            >
              <span slot="append">m²</span>
            </el-input>
          </el-col>
          <el-col :span="6">
            <span class="word-limit"
              >{{ ruleForm.houseArea.length }} / {{ 5 }}</span
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="房间数量">
        <el-row>
          <el-col :span="18">
            <el-input v-model="ruleForm.RoomNumber" placeholder="0">
              <span slot="append">间</span>
            </el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="可住人数" prop="housePeople">
        <el-row>
          <el-col :span="18">
            <el-input
              v-model="ruleForm.housePeople"
              maxlength="2"
              placeholder="0"
            >
              <span slot="append">人</span>
            </el-input>
          </el-col>
          <el-col :span="6">
            <span class="word-limit"
              >{{ ruleForm.housePeople.length }} / {{ 2 }}</span
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="可否加床">
        <el-row>
          <el-col :span="12">
            <el-radio v-model="ruleForm.extraBed" :label="false"
              >不可加床</el-radio
            >
            <el-radio v-model="ruleForm.extraBed" :label="true">加床</el-radio>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="ruleForm.extraBedNumber"
              v-show="ruleForm.extraBed == true"
              placeholder="0"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="房型图片" prop="housePicture">
        <el-upload
          class="upload-demo"
          action="https://localhost:46873/api/app/smart-hotel-app-house/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          :on-success="handleAvatarSuccess"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            支持jpg .jpeg .bmp .png格式,大小不超过2M <br />
            最多上传20张,建议尺寸:750px* 448px
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="房型介绍" prop="roomShao">
        <el-input
          type="textarea"
          v-model="ruleForm.roomShao"
          placeholder="房型介绍"
        ></el-input>
      </el-form-item>
      <el-form-item label="房型标签">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >添加</el-button
        >

        <!-- <el-input v-model="ruleForm.houseType"></el-input> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Addhouse } from "@/api/housetype";
// import { Addtag, deletetag, gettag } from "@/api/tag";
export default {
  name: "VueElementAdminFixInstallProblemAddHouseType",

  data() {
    return {
      ruleForm: {
        houseName: "", //房间名称
        housePrice: "", //门市价
        isHouseSecurity: false, //是否添加押金
        houseSecurity: 0, //押金
        houseArea: "", //房型面积
        housePeople: "", //可住人数
        roomShao: "", //房型价绍
        housePicture: "", //房型图片上传
        houseType: "1", //房型标签
        extraBed: false, //是否加床
        extraBedNumber: 0, //加床数量
        roomNumber: 0, //房间数量
      },
      fileList: [],
      radioYaJin: "false",
      rules: {
        houseName: [
          { required: true, message: "房间名称不能为空", trigger: "blur" },
        ],
        housePrice: [
          { required: true, message: "门市价不能为空", trigger: "blur" },
        ],
        housePeople: [
          { required: true, message: "可住人数不能为空", trigger: "blur" },
        ],
        roomShao: [
          { required: true, message: "房型介绍不能为空", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      // taglist: [],
      // tagform: {
      //   tagName: "",
      // },
      dynamicTags: ["官方直销", "今日特惠", "微信优享"],
      inputVisible: false,
      inputValue: "",
      imglist: [],
    };
  },

  mounted() {
    this.radioYaJin = false;
  },

  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      if (this.dynamicTags.length >= 4) {
        this.$message({
          message: "标签不能超过4条",
          type: "warning",
        });
        return;
      }
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //图片上传  https://localhost:46873/File/IMG_20201001_205551.jpg
    handleRemove(file, fileList) {
      console.log(file, fileList);
      fileList.forEach((ele) => {
        this.imglist.push(ele.name);
      });
      this.ruleForm.housePicture = this.imglist.join(",");
    },
    handleAvatarSuccess(file, fileList) {
      console.log(file, fileList);
      fileList.forEach((ele) => {
        this.imglist.push(ele.name);
      });
      this.ruleForm.housePicture = this.imglist.join(",");
    },
    handlePreview(file) {
      console.log(file);
    },
    //添加房型
    saveHouse() {
      let _this = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          Addhouse(this.ruleForm).then((res) => {
            if (res.data) {
              this.$message({
                message: res.message,
                type: "success",
                onClose: function () {
                  _this.$emit("savehousetype");
                },
              });
            } else {
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
<style>
.word-limit.is-disabled {
  opacity: 0.6;
}
</style>